<script setup lang="ts">
import { ref } from 'vue'

const message = ref('')

const sendMessage = () => {
  if (message.value.trim()) {
    // 这里可以添加发送消息的逻辑
    console.log('发送消息:', message.value)
    message.value = ''
  }
}
</script>

<template>
  <div class="chat-container">
    <div class="chat-header">
      <h1>AI 聊天</h1>
      <p>多模态对话机器人，支持图片、音频等交互</p>
    </div>
    
    <div class="chat-messages">
      <div class="message received">
        <p>您好！我是AI助手，有什么我可以帮您的吗？</p>
      </div>
    </div>
    
    <div class="chat-input">
      <input 
        v-model="message" 
        type="text" 
        placeholder="输入您的消息..." 
        @keyup.enter="sendMessage"
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh; // 至少填充整个视口高度
  display: flex;
  flex-direction: column;
  width: 100%;
}

.chat-header {
  text-align: center;
  margin-bottom: 2rem;
  
  h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 0.5rem;
  }
  
  p {
    color: #666;
    font-size: 1rem;
  }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 1rem;
}

.message {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 8px;
  
  &.received {
    background: #ffffff;
    max-width: 80%;
  }
  
  p {
    margin: 0;
  }
}

.chat-input {
  display: flex;
  gap: 0.5rem;
  
  input {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    
    &:focus {
      outline: none;
      border-color: #409eff;
    }
  }
  
  button {
    padding: 0.8rem 1.5rem;
    background: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    
    &:hover {
      background: #337ecc;
    }
  }
}
</style>